<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-i18n="pageTitle">WebDavy - 快速轻量的 webdav 客户端</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/lucide.js"></script>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1><i data-lucide="hard-drive"></i> WebDavy</h1>
      <div class="language-toggle">
        <button id="lang-toggle-btn" class="lang-btn" data-tooltip="Switch Language">
          <span id="lang-text">EN</span>
        </button>
      </div>
    </div>
    
    <div class="connection-form">
      <h2 data-i18n="connectionSettings">连接设置</h2>
      <div class="form-group">
        <label for="server-url" data-i18n="serverUrl">服务器地址</label>
        <input type="text" id="server-url" data-i18n-placeholder="serverUrlPlaceholder" placeholder="https://example.com/webdav/">
      </div>
      <div class="form-group">
        <label for="username" data-i18n="username">用户名</label>
        <input type="text" id="username">
      </div>
      <div class="form-group">
        <label for="password" data-i18n="password">密码</label>
        <input type="password" id="password">
      </div>
      <div class="form-group auto-connect-group">
        <input type="checkbox" id="auto-connect" checked>
        <label for="auto-connect" data-i18n="autoConnect">下次自动连接</label>
      </div>

      <button id="connect-btn" class="connect-btn" data-i18n-tooltip="connectTooltip" data-tooltip="连接到WebDAV服务器"><i data-lucide="plug"></i> <span data-i18n="connect">连接</span></button>
      <small class="auto-save-note" data-i18n="autoSaveNote">配置会自动保存</small>
      <div id="connection-status" class="connection-status"></div>
    </div>
    
    <div class="file-explorer hidden">
      <!-- 退出按钮 - 移到右上角 -->
      <div class="logout-container">
        <button id="logout-btn" class="btn-icon logout-btn" data-i18n-tooltip="logout" data-tooltip="退出登录">
          <i data-lucide="log-out"></i>
        </button>
      </div>
      
      <!-- 路径输入 - 最上面 -->
      <div class="path-input-container">
        <input type="text" id="current-path" value="/" data-i18n-placeholder="pathPlaceholder" placeholder="输入路径..." data-i18n-title="pathTooltip" title="可编辑路径，按回车键跳转">
      </div>
      
      <!-- 导航按钮组 - 路径下方 -->
      <div class="navigation-container">
        <div class="nav-group path-group">
          <button id="parent-dir-btn" class="btn-icon" data-i18n-tooltip="parentDir" data-tooltip="返回上级目录"><i data-lucide="arrow-up"></i></button>
          <button id="refresh-btn" class="btn-icon" data-i18n-tooltip="refresh" data-tooltip="刷新当前目录"><i data-lucide="refresh-cw"></i></button>
        </div>
        
        <div class="nav-group view-group">
          <button id="list-view-btn" class="btn-icon active" data-i18n-tooltip="listView" data-tooltip="列表视图"><i data-lucide="list"></i></button>
          <button id="grid-view-btn" class="btn-icon" data-i18n-tooltip="gridView" data-tooltip="网格视图"><i data-lucide="grid-3x3"></i></button>
        </div>
        
        <div class="nav-group action-group">
          <button id="toolbar-upload-btn" class="btn-icon" data-i18n-tooltip="upload" data-tooltip="选择文件后立即上传"><i data-lucide="upload"></i></button>
          <button id="toolbar-new-folder-btn" class="btn-icon" data-i18n-tooltip="newFolder" data-tooltip="新建文件夹"><i data-lucide="folder-plus"></i></button>
        </div>
      </div>
      
      <div id="file-list" class="file-list">
        <div id="elastic-new-folder" class="elastic-new-folder hidden">
          <button class="elastic-new-folder-btn" data-i18n-tooltip="newFolder" data-tooltip="新建文件夹">
            <i data-lucide="folder-plus"></i>
            <span data-i18n="newFolder">新建文件夹</span>
          </button>
        </div>
        <!-- 文件列表内容 -->
      </div>
      
      <!-- 移除底部上传区域；保留一个隐藏的文件输入用于选择文件 -->
      <input type="file" id="file-upload" multiple style="display:none" />
    </div>
  </div>
  
  <!-- 文件预览覆盖层 -->
  <div class="preview-overlay" id="preview-overlay">
    <div class="preview-container">
      <button class="preview-close" id="preview-close"><i data-lucide="x"></i></button>
      <div id="preview-content"></div>
      <div class="preview-title" id="preview-title"></div>
    </div>
  </div>
  
  <!-- Toast通知容器 -->
  <div id="toast-container" class="toast-container"></div>
  
  <script src="js/i18n.js"></script>
  <script src="js/webdav.js"></script>
  <script src="js/lucide.js"></script>
  <script src="js/popup.js"></script>
  <script src="js/lucide-init.js"></script>
</body>
</html>